<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
      class="top-search-bar"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入电话号码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- transport capacity -->
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          size="small"
        >
          <el-option label="启用" value="1" />
          <el-option label="禁用" value="0" />
        </el-select>
      </el-form-item>

      <el-form-item label="所属类型" prop="ownerType">
        <el-select
          v-model="queryParams.ownerType"
          placeholder="请选择所属类型"
          clearable
          size="small"
        >
          <el-option label="平台" value="platform" />
          <el-option label="服务商" value="service" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="20" class="driver-split">
      <el-col :span="6" class="driver-list-panel">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="false"
          label-width="68px"
        >
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入用户名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="电话" prop="phone">
            <el-input
              v-model="queryParams.phone"
              placeholder="请输入电话号码"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- transport capacity -->
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="请选择状态"
              clearable
              size="small"
            >
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item>

          <el-form-item label="所属类型" prop="ownerType">
            <el-select
              v-model="queryParams.ownerType"
              placeholder="请选择所属类型"
              clearable
              size="small"
            >
              <el-option label="平台" value="platform" />
              <el-option label="服务商" value="service" />
            </el-select>
          </el-form-item>

          <el-form-item label="服务商ID" prop="serviceId">
            <el-input
              v-model="queryParams.serviceId"
              placeholder="请输入服务商ID"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="打卡类型" prop="clockType">
            <el-select
              v-model="queryParams.clockType"
              placeholder="请选择打卡类型"
              clearable
              size="small"
            >
              <el-option label="上班" value="1" />
              <el-option label="下班" value="2" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-scrollbar class="driver-list" wrap-class="driver-list-wrap">
          <template v-if="!loading && driverList && driverList.length">
            <div
              class="driver-item"
              v-for="item in driverList"
              :key="item.id"
              @click="flyToDriver(item)"
            >
              <div class="avatar">{{ (item.driverName || '司').toString().slice(0,1).toUpperCase() }}</div>
              <div class="meta">
                <div class="title">
                  <span class="name">{{ item.driverName || '未命名司机' }}</span>
                </div>
                <div class="sub"><span class="label">电话：</span><span class="text">{{ item.driverPhone || '--' }}</span></div>
                <div class="sub"><span class="label">车牌号：</span><span class="text">{{ item.plateNumber || '--' }}</span></div>
                <div class="sub"><span class="label">服务商：</span><span class="text">{{ item.serviceName || '--' }}</span></div>
                <div class="sub"><span class="label">位置：</span><span class="text">{{ item.location || '--' }}</span></div>
              </div>
              <div class="actions">
                <el-switch
                  v-model="item.status"
                  :active-value="1"
                  :inactive-value="0"
                  @change="handleStatusChange(item)"
                />
                <el-button type="text" size="mini" icon="el-icon-location" @click.stop="flyToDriver(item)">定位</el-button>
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleView(item)">查看</el-dropdown-item>
                    <el-dropdown-item @click.native="handleUpdate(item)">修改</el-dropdown-item>
                    <el-dropdown-item divided @click.native="handleDelete(item)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </template>
          <el-empty v-else-if="!loading" description="暂无数据"></el-empty>
          <div v-else class="list-loading"><i class="el-icon-loading"></i> 加载中...</div>
        </el-scrollbar>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>

      <el-col :span="18" class="driver-map-panel">
        <div class="map-toolbar">
          <div class="toolbar-left">
            <span class="map-title">司机位置</span>
          </div>
          <div class="toolbar-right">
            <el-switch v-model="autoFitView" active-text="自适应视野" size="mini" />
            <el-button size="mini" icon="el-icon-rank" @click="fitMapToMarkers">适配</el-button>
          </div>
        </div>
        <div id="driverMap" class="driver-map"></div>
      </el-col>
    </el-row>

    <!-- 添加或修改调度信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="60%"
      append-to-body
      custom-class="driver-dialog"
      :before-close="cancel"
      center
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="driver-form"
      >
        <div class="dialog-header">
          <i class="el-icon-user header-icon"></i>
          <span class="header-text">调度信息</span>
        </div>
        <div class="form-container">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户名" prop="userName">
                <el-input
                  v-model="form.userName"
                  placeholder="请输入用户名"
                  :disabled="isView"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="phone">
                <el-input
                  v-model="form.phone"
                  placeholder="请输入电话号码"
                  :disabled="isView"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-select
                  v-model="form.status"
                  placeholder="请选择状态"
                  :disabled="isView"
                  class="full-width-input"
                >
                  <el-option label="启用" :value="1" />
                  <el-option label="禁用" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="所属类型" prop="ownerType">
                <el-select
                  v-model="form.ownerType"
                  placeholder="请选择所属类型"
                  :disabled="isView"
                  class="full-width-input"
                >
                  <el-option label="平台" value="platform" />
                  <el-option label="服务商" value="service" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  placeholder="请输入备注信息"
                  :disabled="isView"
                  :rows="3"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 查看模式下显示的只读信息 -->
          <div v-if="isView && form.id">
            <el-divider content-position="left" class="divider-title"
              >系统信息</el-divider
            >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="创建时间">
                  <el-input
                    v-model="form.createTime"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建者">
                  <el-input
                    v-model="form.createBy"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="更新时间">
                  <el-input
                    v-model="form.updateTime"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="更新者">
                  <el-input
                    v-model="form.updateBy"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer" v-if="!isView">
        <el-button @click="cancel" icon="el-icon-close" class="cancel-btn"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="submitForm"
          icon="el-icon-check"
          class="submit-btn"
          >确 定</el-button
        >
      </div>
      <div slot="footer" class="dialog-footer" v-else>
        <el-button @click="cancel" icon="el-icon-close" class="cancel-btn"
          >关 闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listTransport,
  delOrder,
  addDispatch,
  dispatchInfo,
  updateDispatch,
} from "@/api/api/facilitator";

export default {
  name: "DriverList",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 调度信息表格数据
      driverList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否为查看模式
      isView: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户名长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "电话号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" },
        ],
        ownerType: [
          { required: true, message: "所属类型不能为空", trigger: "change" },
        ],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        isCarpooling: 0,
        status: 0,
      },
      // 地图相关
      AMap: null,
      map: null,
      mapMarkers: [],
      autoFitView: true,
      mapInitRetry: 0,
      maxMapInitRetry: 30,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * 查询调度信息列表
     */
    getList() {
      this.loading = true;
      listTransport(this.queryParams).then((response) => {
        this.driverList = response.data;
        this.total = response.total;
        this.loading = false;
        this.$nextTick(() => {
          this.ensureMapAndRefresh();
        });
      });
    },

    /**
     * 搜索按钮操作
     */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**
     * 重置按钮操作
     */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**
     * 多选框选中数据
     */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userName: null,
        phone: null,
        status: 1,
        ownerType: null,
        serviceId: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.isView = false;
      this.open = true;
      this.title = "添加调度信息";
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.reset();
      this.isView = true;
      const id = row.id;
      dispatchInfo(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "查看调度信息";
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.isView = false;
      const id = row.id || this.ids;
      dispatchInfo(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改调度信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            // 修改操作
            updateDispatch(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            // 新增操作
            addDispatch(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /**
     * 状态修改
     * @param {Object} row 行数据
     */
    handleStatusChange(row) {
      let text = row.status === 1 ? "启用" : "停用";
      this.$modal
        .confirm('确认要"' + text + '""' + (row.driverName || '-') + '"用户吗？')
        .then(function () {
          // 这里应该调用修改状态的API
          // return changeUserStatus(row.id, row.status);
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === 0 ? 1 : 0;
        });
    },
    /**
     * 删除按钮操作
     */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除调度信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delOrder(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /**
     * 导出按钮操作
     */
    handleExport() {
      this.download(
        "api/driver/export",
        {
          ...this.queryParams,
        },
        `driver_${new Date().getTime()}.xlsx`
      );
    },
    /**
     * 初始化地图（若未就绪则轮询等待）
     * @returns {void}
     */
    ensureMapAndRefresh() {
      if (this.map) {
        this.refreshMapMarkers();
        return;
      }
      if (window && window.AMap) {
        this.AMap = window.AMap;
        this.initMap();
        return;
      }
      if (this.mapInitRetry >= this.maxMapInitRetry) return;
      this.mapInitRetry++;
      setTimeout(() => this.ensureMapAndRefresh(), 300);
    },
    /**
     * 创建地图实例并添加基础控件
     * @returns {void}
     */
    initMap() {
      try {
        const container = document.getElementById("driverMap");
        if (!container) return;
        if (container.clientHeight === 0) {
          container.style.height = "520px";
        }
        this.map = new this.AMap.Map("driverMap", {
          center: [116.404, 39.915],
          zoom: 5,
          resizeEnable: true,
          viewMode: "2D",
        });
        this.AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.MapType"], () => {
          this.map.addControl(new this.AMap.ToolBar());
          this.map.addControl(new this.AMap.Scale());
          this.map.addControl(new this.AMap.MapType());
        });
        this.refreshMapMarkers();
      } catch (e) {
        // 忽略初始化异常，稍后重试
        setTimeout(() => this.ensureMapAndRefresh(), 500);
      }
    },
    /**
     * 根据司机列表在地图上渲染标记
     * @returns {void}
     */
    refreshMapMarkers() {
      if (!this.map || !this.driverList) return;
      // 清除旧标记
      if (this.mapMarkers && this.mapMarkers.length) {
        this.map.remove(this.mapMarkers);
      }
      this.mapMarkers = [];
      const boundsPoints = [];
      this.driverList.forEach((row) => {
        const pos = this.parseDriverPosition(row);
        if (!pos) return;
        const marker = new this.AMap.Marker({
          position: [pos.lng, pos.lat],
          title: row.driverName || row.driverPhone || "司机",
          offset: new this.AMap.Pixel(-10, -10),
        });
        marker.setLabel({
          direction: "right",
          offset: new this.AMap.Pixel(10, 0),
          content: `<div style=\"background:#fff;padding:2px 6px;border-radius:4px;border:1px solid #eee;\">${row.driverName || "司机"}</div>`,
        });
        marker.on("click", () => {
          this.map.setZoomAndCenter(14, [pos.lng, pos.lat]);
        });
        this.map.add(marker);
        this.mapMarkers.push(marker);
        boundsPoints.push([pos.lng, pos.lat]);
      });
      if (this.autoFitView && boundsPoints.length) {
        this.map.setFitView(this.mapMarkers, true, [80, 80, 80, 80], 500);
      }
    },
    /**
     * 解析司机坐标：兼容 lal 字段或 lat/lng 字段
     * @param {Object} row 列表行数据
     * @returns {{lat:number,lng:number}|null}
     */
    parseDriverPosition(row) {
      if (!row) return null;
      // 兼容独立字段
      const hasLatLng = typeof row.lat === "number" && typeof row.lng === "number";
      if (hasLatLng) {
        if (this.isValidLatLng(row.lat, row.lng)) return { lat: row.lat, lng: row.lng };
      }
      // 兼容字符串字段 lal，如 "lng,lat" 或 "lat,lng"
      const lal = row.lal || row.LAL || row.location || row.coords;
      if (lal && typeof lal === "string") {
        const parts = lal.split(/[,\s]+/).map((n) => Number(n));
        if (parts.length >= 2 && parts.every((n) => !isNaN(n))) {
          const a = parts[0];
          const b = parts[1];
          // 尝试判断顺序
          // 情况1：a 为经度 [-180,180] 且 b 为纬度 [-90,90]
          if (this.inRange(a, -180, 180) && this.inRange(b, -90, 90)) {
            return { lat: b, lng: a };
          }
          // 情况2：a 为纬度 [-90,90] 且 b 为经度 [-180,180]
          if (this.inRange(a, -90, 90) && this.inRange(b, -180, 180)) {
            return { lat: a, lng: b };
          }
        }
      }
      return null;
    },
    /**
     * 判断是否为合法经纬度
     * @param {number} lat 纬度
     * @param {number} lng 经度
     * @returns {boolean}
     */
    isValidLatLng(lat, lng) {
      return this.inRange(lat, -90, 90) && this.inRange(lng, -180, 180);
    },
    /**
     * 数值是否在区间内
     * @param {number} v 值
     * @param {number} min 最小
     * @param {number} max 最大
     * @returns {boolean}
     */
    inRange(v, min, max) {
      return typeof v === "number" && v >= min && v <= max;
    },
    /**
     * 视野适配到所有标记
     * @returns {void}
     */
    fitMapToMarkers() {
      if (this.map && this.mapMarkers.length) {
        this.map.setFitView(this.mapMarkers, true, [80, 80, 80, 80], 500);
      }
    },
    /**
     * 列表中点击定位到某个司机
     * @param {Object} row 司机行
     * @returns {void}
     */
    flyToDriver(row) {
      const pos = this.parseDriverPosition(row);
      if (!this.map || !pos) return;
      this.autoFitView = false;
      this.map.setZoomAndCenter(14, [pos.lng, pos.lat]);
    },
    /**
     * 获取打卡类型文本
     * @param {string|number} clockType 打卡类型
     * @returns {string} 打卡类型文本
     */
    getClockTypeText(clockType) {
      const typeMap = {
        1: "上班",
        2: "下班",
        1: "上班",
        2: "下班",
      };
      return typeMap[clockType] || "未知";
    },
    /**
     * 获取打卡类型标签颜色
     * @param {string|number} clockType 打卡类型
     * @returns {string} 标签类型
     */
    getClockTypeTagType(clockType) {
      const typeMap = {
        1: "success",
        2: "warning",
        1: "success",
        2: "warning",
      };
      return typeMap[clockType] || "info";
    },
    /**
     * 获取打卡类型图标
     * @param {string|number} clockType 打卡类型
     * @returns {string} 图标类名
     */
    getClockTypeIcon(clockType) {
      const iconMap = {
        1: "el-icon-top",
        2: "el-icon-bottom",
        1: "el-icon-top",
        2: "el-icon-bottom",
      };
      return iconMap[clockType] || "el-icon-time";
    },
    /**
     * 获取所属类型文本
     * @param {string} ownerType 所属类型
     * @returns {string} 所属类型文本
     */
    getOwnerTypeText(ownerType) {
      const typeMap = {
        platform: "平台",
        service: "服务商",
      };
      return typeMap[ownerType] || "未知";
    },
    /**
     * 获取所属类型标签颜色
     * @param {string} ownerType 所属类型
     * @returns {string} 标签类型
     */
    getOwnerTypeTagType(ownerType) {
      const typeMap = {
        platform: "primary",
        service: "success",
      };
      return typeMap[ownerType] || "info";
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.top-search-bar {
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 10px 10px 0 10px;
}

.driver-split {
  align-items: stretch;
}

.driver-list-panel {
  display: flex;
  flex-direction: column;
}

.driver-map-panel {
  display: flex;
  flex-direction: column;
}

.driver-list {
  height: 620px;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 6px;
}

.driver-list-wrap {
  padding: 8px 8px 0 8px;
}

.driver-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .2s ease;
}

.driver-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border-color: #e6f4ff;
  background: #f9fbff;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,#69c0ff,#1890ff);
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.meta {
  flex: 1;
  min-width: 0;
}

.title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.name {
  font-weight: 600;
  color: #1f1f1f;
}

.sub {
  display: flex;
  align-items: center;
  color: #8c8c8c;
  font-size: 12px;
  margin-bottom: 4px;
}

.sub .label { color: #595959; min-width: 56px; }
.sub .text { color: #595959; }


.actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  color: #8c8c8c;
}

.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.map-title {
  font-weight: 600;
  color: #262626;
}

.driver-map {
  width: 100%;
  height: 520px;
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
  border-radius: 6px;
}

.driver-dialog {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.driver-dialog >>> .el-dialog__header {
  padding: 16px 20px;
  background: linear-gradient(135deg, #1890ff, #0050b3);
  margin-right: 0;
}

.driver-dialog >>> .el-dialog__title {
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
}

.driver-dialog >>> .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
  font-size: 20px;
}

.driver-dialog >>> .el-dialog__body {
  padding: 30px 20px;
}

.driver-dialog >>> .el-dialog__footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.driver-form {
  padding: 0;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.header-icon {
  font-size: 24px;
  color: #1890ff;
  margin-right: 10px;
}

.header-text {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.form-container {
  margin-bottom: 20px;
  background-color: #f9fafc;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
  border: 1px solid #ebeef5;
  transition: all 0.3s;
}

.form-container:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
}

.divider-title {
  font-size: 16px;
  font-weight: bold;
  color: #1890ff;
}

.el-divider {
  margin: 24px 0;
}

.full-width-input {
  width: 100%;
}

.full-width-input >>> .el-input__inner {
  height: 42px;
  line-height: 42px;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.full-width-input >>> .el-input__inner:hover {
  border-color: #1890ff;
}

.full-width-input >>> .el-input__inner:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.full-width-input >>> .el-textarea__inner {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.full-width-input >>> .el-textarea__inner:hover {
  border-color: #1890ff;
}

.full-width-input >>> .el-textarea__inner:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.dialog-footer {
  text-align: center;
  padding-top: 10px;
}

.submit-btn {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  background: linear-gradient(to right, #1890ff, #096dd9);
  border: none;
  transition: all 0.3s;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

.cancel-btn {
  padding: 10px 24px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  margin-right: 16px;
  transition: all 0.3s;
}

.cancel-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.el-input-number.full-width-input {
  width: 100%;
}

.el-input-number.full-width-input >>> .el-input__inner {
  text-align: left;
}
</style>
